<block name="body">
    <link href="__ROOT__/Public/favicon.ico" type="image/x-icon" rel="shortcut icon">
    <link rel="stylesheet" type="text/css" href="__CSS__/base.css" media="all">
    <link rel="stylesheet" type="text/css" href="__CSS__/common.css" media="all">
    <link rel="stylesheet" type="text/css" href="__CSS__/module.css">
    <!--<link rel="stylesheet" type="text/css" href="__CSS__/style.css" media="all">-->
    <link rel="stylesheet" type="text/css" href="__CSS__/{$Think.config.COLOR_STYLE}.css" media="all">

    <link href="__STATIC__/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="__STATIC__/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet">
    <link href="__STATIC__/tag-input/jquery.tagsinput.css" rel="stylesheet">
    <link href="__STATIC__/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
    <!--[if lt IE 9]>
    <script type="text/javascript" src="__STATIC__/jquery-1.10.2.min.js"></script>
    <![endif]--><!--[if gte IE 9]><!-->
    <script type="text/javascript" src="__STATIC__/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="__JS__/jquery.mousewheel.js"></script>
    <script src="__STATIC__/bootstrap/js/bootstrap.min.js"></script>
    <script src="__STATIC__/bootstrap-fileinput/js/plugins/piexif.min.js" type="text/javascript"></script>
    <script src="__STATIC__/bootstrap-fileinput/js/plugins/sortable.min.js" type="text/javascript"></script>
    <script src="__STATIC__/bootstrap-fileinput/js/plugins/purify.min.js" type="text/javascript"></script>
    <script src="__STATIC__/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script>
    <script src="__STATIC__/tag-input/jquery.tagsinput.js" type="text/javascript"></script>
    <script src="__STATIC__/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
    <style>
        .portlet-placeholder {
            display: inline-block;
            border: 1px dotted black;
            vertical-align: middle;
            height: 100px;
            width: 120px;
        }
    </style>

    <div class="container-fluid" style="padding-top: 40px; padding-left: 50px;">
        <div class="row">
            <div class="col-sm-4">
                <h4>{$meta_title}</h4>
            </div>
        </div>

        <form  role="form" class="form-horizontal">
            <div class="form-group">
                <label class="control-label col-sm-1">曲谱名</label>
                <label class="control-label col-sm-4" style="text-align: left;">{$data.name}</label>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-1">歌曲名</label>
                <label class="control-label col-sm-4" style="text-align: left;">{$data.song_name}</label>
            </div>

            <div class="form-group">
                <label class="control-label col-sm-1">歌手名</label>
                <label class="control-label col-sm-4" style="text-align: left;">{$data.singer}</label>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-1">曲谱标签</label>
                <label class="control-label col-sm-2" style="text-align: left;">{$data.tags}</label>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-1">曲谱描述</label>
                <label class="control-label col-sm-2" style="text-align: left;">{$data.desc}</label>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-1">曲谱图片</label>
                <!--<div class="col-sm-11">
                    <input type="file" name="images" id="images" value="" multiple class="file-loading col-sm-3">
                </div>-->
                <ul id="layer-img" class="control-label col-sm-9 sortable" style="text-align: left;">
                <notempty name="data.image">
                <volist name="data.image" id="image">
                    <li class="portlet" style="display: inline-block" id="{$image['id']}">
                        <img id="sheet_img{$image['id']}" onclick="img_detail()" style="height: 200px;" layer-src="{$image['url']}" src="{$image['url']}" alt="">
                    </li>
                </volist>
                <else/>
                   oops!暂时没有图片
                </notempty>
                </ul>
            </div>

        </form>
</block>


<block name="script">
    <script src="__STATIC__/layer/layer.js" type="text/javascript"></script>
    <script type="text/javascript">

        function img_detail(){
            layer.photos({
                photos: '#layer-img',
                anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
            });
        }

        $('.sortable').sortable({
            placeholder: 'portlet-placeholder',
            update: function () {
                var sorted = $('.sortable').sortable("toArray", {attribute: "id"});
                var sheet_id = "{$data.id}";
                $.ajax({
                    type: "post",
                    url: "{:U('admin/sheet/sortSheetImg')}",
                    data: {image_id: sorted, sheet_id: sheet_id},
                    dataType: 'json',
                    success: function(result) {
                        window.location.reload();
                    }
                });
            }

        });
        $('.sortable').disableSelection();

    </script>
</block>